<template>
	<view class="root">
		<view
			:style="{
				margin: `30rpx`,
				backgroundImage: `linear-gradient(-50deg, #3ec483 0%, #239f4d 100%)`,
				boxShadow: `0 0 16rpx 0 rgba(0, 0, 0, 0.15)`,
			}"
			class="color-fff br-24"
		>
			<view class="ai-center mt-50 mb-50">
				<text class="fs-46">{{ wallet.fee }}</text>
				<text class="fs-24">账户余额(元)</text>
			</view>

			<label
				:style="{ backgroundColor: `rgba(255, 255, 255, 0.2)` }"
				class="pt-18 pb-18 jc-se"
			>
				<view class="ai-center">
					<text class="fs-34">{{ wallet.total_fee }}</text>
					<text class="fs-24">总收入(元)</text>
				</view>
				<view
					:style="{ backgroundColor: `rgba(255, 255, 255, 0.2)` }"
					class="width-2 height-60"
				/>
				<view class="ai-center">
					<text class="fs-34">{{ wallet.out_fee }}</text>
					<text class="fs-24">已提现(元)</text>
				</view>
			</label>
		</view>

		<view
			:style="{
				margin: `30rpx`,
				boxShadow: `0 0 16rpx 0 rgba(0, 0, 0, 0.15)`,
				borderRadius: `10rpx`,
			}"
		>
			<text
				:style="{ padding: `30rpx`, borderBottom: `2rpx solid #eee` }"
				class="fs-24 color-1b1b1b"
			>
				<text class="mr-12">可提现(元)</text>
				<text class="fw-700">{{ wallet.cash_fee }}</text>
			</text>

			<view
				:style="{
					padding: `42rpx 30rpx`,
				}"
				class="fd-row ai-center"
			>
				<text class="fs-48 color-3ec483">￥</text>
				<input
					type="digit"
					v-model="amount"
					class="input f1 fs-28 ml-18 mr-18"
					placeholder-class="color-999"
					placeholder="请输入提现金额"
				/>
				<button
					:plain="true"
					hover-class="tap-hover"
					class="color-fff border-none br-10 bgc-3ec483 fs-28 lh-2"
					@click="withdrawal"
				>
					提现
				</button>
			</view>
		</view>

		<label :style="{ margin: `10rpx 30rpx 40rpx` }" class="title fs-28 color-1b1b1b">
			佣金记录
		</label>

		<view :style="{ borderTop: `1rpx solid #eee` }">
			<label
				v-for="(log, index) in logs.list"
				:key="index"
				:style="{ padding: `30rpx`, borderBottom: `1rpx solid #eee` }"
				class="jc-sb"
			>
				<view>
					<text class="fs-28 color-1b1b1b"> {{ log.name }}（{{ log.type_text }}） </text>
					<text class="fs-24 color-999">{{ log.create_time }}</text>
				</view>
				<text class="fs-28 color-f33">+{{ log.amount }}元</text>
			</label>
			<uni-load-more
				:status="loadStatus"
				:contentText="{
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '暂无更多记录',
				}"
			/>
		</view>
	</view>
</template>

<script lang="ts">
	import { Pager } from "@/common/type";
	import { Vue, Component } from "vue-property-decorator";
	import uniLoadMore from "@/components/uni-load-more.vue";
	import { sleep } from "@/libs/utils";

	let requestFlag: boolean = false;
	@Component({ components: { uniLoadMore } })
	export default class Commission extends Vue {
		// component property
		logs: Pager<AnyObject> = {
			list: [],
			page: 1,
			size: 10,
		};
		wallet: AnyObject = {};
		amount: string = "";

		loadStatus: string = "loading";

		onLoad() {
			this.getListData();
		}
		onReachBottom() {
			this.getListData();
		}
		getListData() {
			const { $request, logs } = this;
			if (requestFlag || !logs.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/user/rebatelist", {
					page: logs.page,
					size: logs.size,
				})
				.then(({ data }) => {
					data.wallet && (this.wallet = data.wallet);

					logs.list.push(...data.list);
					logs.page = +data.page * logs.size < data.total ? ++data.page : 0;
					this.loadStatus = logs.page ? "more" : "noMore";
				})
				.finally(() => (requestFlag = false));
		}
		async withdrawal() {
			const { errmsg: title, errcode } = await this.$request.get(
				`/user/cashout?amount=${this.amount}`
			);
			await uni.showToast({ title, icon: "none" });
			await sleep(1.5);
			+errcode === 0 ? uni.navigateBack : uni.navigateTo({ url: "/pages/mine/Profile" });
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.title::before {
		content: "";
		width: 6rpx;
		height: 34rpx;
		margin-right: 10rpx;
		background-color: #3ec483;
		border-radius: 3rpx;
	}
</style>